<template>
  <div class="app-container">
    <div v-if="form_id!=4" class="calendarMain">
      <h3 style="border-bottom:1px solid #ddd;padding-bottom:20px;">{{ info.title }}
        <el-button-group class="filter-item" style="margin-left:30px;">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-refresh"
            @click="fetchData"
          >
            刷新
          </el-button>
        </el-button-group>
      </h3>
      <el-radio-group style="margin-bottom: 30px;" v-model="dateParms.menu">
        <el-radio-button :label="item.value" v-for="item in info.menu">{{ item.name }}</el-radio-button>
      </el-radio-group>

      <el-table
        v-loading="PageLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        max-height="90%"
        class="table-container"
        highlight-current-row
      >
        <el-table-column
          width="80"
          label="联系人"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.mobile_name }}
          </template>
        </el-table-column>

        <el-table-column
          width="110"
          label="手机"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.mobile_number }}
          </template>
        </el-table-column>
        <el-table-column v-for="(key,index) in list[0].json_data" :key="index" align="center" :label="formKey[dateParms.menu][index]?formKey[dateParms.menu][index].k:'上传文件'"
                         :width="[index=='desc' || index=='liyou'?'250':'110']" v-if="info.id=='1'"
        >
          <template slot-scope="scope">
            <div v-if="index=='imgList'">
              <p v-for="(url,idx) in scope.row.json_data.imgList"><a :href="url" target="_blank" style="color:#20a0ff">{{
                  url
                }}</a></p>
            </div>
            <div v-else>{{ scope.row.json_data[index] }}</div>
          </template>
        </el-table-column>


        <el-table-column v-for="(key,indexs) in list[0].json_data"  v-if="info.id!='1' && info.keyText[indexs]" :label="info.keyText[indexs]"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.json_data[indexs] }}</div>
          </template>
        </el-table-column>


        <!--        <el-table-column-->
        <!--          width="150"-->
        <!--          :label="idx"-->
        <!--          align="center"-->
        <!--          v-for="(item,idx) in list[0].json_data"-->
        <!--        >-->
        <!--          <template>-->
        <!--            <div v-if="idx=='imgList'">-->

        <!--            </div>-->
        <!--            <div v-else>{{ scope.row.json_data[] }}</div>-->
        <!--          </template>-->
        <!--        </el-table-column>-->

      </el-table>
    </div>
    <div v-else class="calendarMain">
      <h3 style="border-bottom:1px solid #ddd;padding-bottom:20px;">{{ info.title }}
        <el-button-group class="filter-item" style="margin-left:30px;">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-refresh"
            @click="fetchData"
          >
            刷新
          </el-button>
        </el-button-group>
      </h3>
      <el-radio-group style="margin-bottom: 30px;" v-model="dateParms.menu">
        <el-radio-button :label="item.value" v-for="item in info.menu">{{ item.name }}</el-radio-button>
      </el-radio-group>

      <el-table
        v-loading="PageLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        max-height="90%"
        class="table-container"
        highlight-current-row
      >
        <el-table-column
          width="80"
          label="联系人"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.mobile_name }}
          </template>
        </el-table-column>

        <el-table-column
          width="110"
          label="手机"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.mobile_number }}
          </template>
        </el-table-column>

        <el-table-column
          width="110"
          label="案例标题"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.json_data.title }}
          </template>
        </el-table-column>


        <el-table-column
          width="110"
          label="案例链接"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.json_data.links }}
          </template>
        </el-table-column>


        <el-table-column
          width="310"
          label="案例情况简介"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.json_data.desc }}
          </template>
        </el-table-column>


        <el-table-column
          width="310"
          label="推荐理由"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.json_data.liyou }}
          </template>
        </el-table-column>

        <el-table-column
          width="110"
          label="联系地址"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.json_data.address }}
          </template>
        </el-table-column>

        <el-table-column
          width="110"
          label="邮编"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.json_data.youbian }}
          </template>
        </el-table-column>

        <el-table-column
          width="110"
          label="推荐单位"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.json_data.danwei }}
          </template>
        </el-table-column>


        <el-table-column
          width="110"
          label="盖章材料"
          align="center"
        >
          <template slot-scope="scope">
            <a :href="scope.row.json_data.imgList[0].url" target="_blank" style="color:#369">点击查看</a>
          </template>
        </el-table-column>

        <el-table-column
          width="110"
          label="图片材料"
          align="center"
        >
          <template slot-scope="scope">
            <a :href="img.url" target="_blank" style="color:#369" v-for="(img,idx) in scope.row.json_data.imgList2">点击查看<br /></a>
          </template>
        </el-table-column>

        <el-table-column
          width="110"
          label="视频材料"
          align="center"
        >
          <template slot-scope="scope">
            <a :href="scope.row.json_data.videoList" target="_blank" style="color:#369" v-if="scope.row.json_data.videoList.length>0">点击查看<br /></a>
          </template>
        </el-table-column>


        <!--        <el-table-column-->
        <!--          width="150"-->
        <!--          :label="idx"-->
        <!--          align="center"-->
        <!--          v-for="(item,idx) in list[0].json_data"-->
        <!--        >-->
        <!--          <template>-->
        <!--            <div v-if="idx=='imgList'">-->

        <!--            </div>-->
        <!--            <div v-else>{{ scope.row.json_data[] }}</div>-->
        <!--          </template>-->
        <!--        </el-table-column>-->

      </el-table>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="dateParms.page"
      :limit.sync="dateParms.limit"
      @pagination="fetchData"
    />
  </div>
</template>

<script>
import { getFormData } from '@/api/wz'
import Pagination from '@/components/Pagination'

export default {
  components: {
    Pagination
  },
  data() {
    return {
      PageLoading: true,
      list: [],
      total: 0,
      form_id: 0,
      info: [],
      dateParms: {
        limit: 20,
        page: 1,
        menu: 0
      },
      //临时KEY解释，复制项目组件
      formKey: [{},
        {
          name: {
            k: "账号名称",
            v: "",
            t: 'input',
            p: '请输入账号名称',
            w: '200px',
            m: 6
          },
          danwei_name: {
            k: "单位全称",
            v: "",
            t: 'input',
            p: '请输入单位全称',
            w: '400px',
            m: 6
          },
          banjian_count: {
            k: "办件数量",
            v: "",
            t: 'input',
            p: '请输入转办/办结的工单数量',
            w: '600px',
            m: 6
          },
          user_system: {
            k: "所属平台",
            v: "",
            t: 'input',
            p: '请输入账号所在平台',
            w: '600px',
            m: 6
          },
          desc: {
            k: "账号简介",
            v: "",
            t: 'textarea',
            p: '不少于20字，不超过100字' + String.fromCharCode(10) +
              'X始终践行以人民为中心的发展思想，重点在解决群众民生实事问题上下功夫，不断健全运行管理机制、创新工作举措，有效提升群众幸福感、满意度。',
            m: 50,
            mh: 100,
          },

          liyou: {
            k: "推荐理由",
            v: "",
            t: 'textarea',
            p: '不少于20字，不超过300字' + String.fromCharCode(10) + String.fromCharCode(10) +
              '例：构建“横向到边，纵向到底”全覆盖体系，在麻辣社区平台7*24小时实行“统一受理、分级负责、归口办理、限时办结”的闭合循环工作机制办理群众诉求，不断提升群众获得感、幸福感、满意度。',
            m: 300
          },

          baosong: {
            k: "报送单位",
            v: "",
            t: 'input',
            p: '请输入报送单位',
            w: '100%',
            m: 6
          }
        },

        {
          title: {
            k: "案例标题",
            v: "",
            t: 'input',
            p: '例如 : 外地游客建言自贡旅游，当地接受意见并发两千字长文详解改进措施',
            w: '100%',
            m: 6
          },
          links: {
            k: "案例链接",
            v: "",
            t: 'input',
            p: '请输入案例链接',
            w: '100%',
            m: 6
          },
          user_system: {
            k: "所属平台",
            v: "",
            t: 'input',
            p: '请输入案例所在平台',
            w: '600px',
            m: 6
          },
          desc: {
            k: "案例简介",
            v: "",
            mh: 200,
            t: 'textarea',
            p: '不少于20字，不超过450字' + String.fromCharCode(10) + String.fromCharCode(10) +
              '例:6月8日，一位外地网民在麻辣社区发出了千字长文，详陈自贡彩灯大世界、恐龙博物馆两大景区存在的诸多问题影响旅游体验。自贡市文广旅局为此联合各方做了详实核查，制定出改进措施后，在麻辣社区进行了回应，感谢网民提出的宝贵意见并表示欣然接受意见，同时对应游客提出的问题详列了改进方法和措施。',
            m: 450
          },
          bldanwei: {
            k: "办理单位",
            v: "",
            t: 'input',
            p: '请输入办理单位',
            w: '100%',
            m: 6
          },
          baosong: {
            k: "报送单位",
            v: "",
            t: 'input',
            p: '请输入报送单位',
            w: '100%',
            m: 6
          }
        },
        {
          name: {
            k: "单位名称",
            v: "",
            t: 'input',
            p: '请输入单位全称',
            w: '100%',
            m: 6
          },

          desc: {
            k: "账号简介",
            v: "",
            mh: 200,
            t: 'textarea',
            p: '不少于20字，不超过150字' + String.fromCharCode(10) + String.fromCharCode(10) +
              '例:XX融媒体中心以XX为依托，搭建线上基层社会治理平台，形成“端、微、网、台”媒体矩阵，移动端平台总粉丝数达X万，已实现政务服务的“一端通联”和便民服务的“一端通用”。',
            m: 150
          },
          liyou: {
            k: "推荐理由",
            v: "",
            mh: 200,
            t: 'textarea',
            p: '不少于20字，不超过450字' + String.fromCharCode(10) + String.fromCharCode(10) +
              '例:XX融媒体中心以XX为依托，搭建线上基层社会治理平台，形成“端、微、网、台”媒体矩阵，移动端平台总粉丝数达X万，已实现政务服务的“一端通联”和便民服务的“一端通用”。',
            m: 450
          },
          baosong: {
            k: "报送单位",
            v: "",
            t: 'input',
            p: '请输入报送单位',
            w: '300px',
            m: 6
          }
        },
        {
          name: {
            k: "姓名",
            v: "",
            t: 'input',
            p: '请输入姓名',
            w: '200px',
            m: 6
          },

          banjian_count: {
            k: "办件数量",
            v: "",
            t: 'input',
            p: '请输入转办/办结的工单数量',
            w: '600px',
            m: 6
          },
          desc: {
            k: "简介",
            v: "",
            t: 'textarea',
            p: '不少于20字，不超过100字' + String.fromCharCode(10) +
              '该同志工作勤奋，爱岗敬业，始终把互联网作为了解群众、贴近群众、为群众排忧解难的有效载体。',
            m: 50,
            mh: 100,
          },

          shiji: {
            k: "主要事迹",
            v: "",
            t: 'textarea',
            p: '不少于20字，不超过300字' + String.fromCharCode(10) + String.fromCharCode(10) +
              '例:从事XX市网络理政工作6年，督促各县(市、区)、市级各单位高质高效做好留言办理回复工作，未出现错办、漏办、超期情况。2023年，快办快结网民留言1800余条，办结率达100%。把“老百姓盼的”与“党和政府干的”紧密相连，实现办事办到心坎上、治理提升幸福感的共赢。',
            m: 300
          },
          danwei: {
            k: "所在单位",
            v: "",
            t: 'input',
            p: '请输入所在单位',
          },
          baosong: {
            k: "报送单位",
            v: "",
            t: 'input',
            p: '请输入报送单位',
            w: '100%',
            m: 6
          }
        },
      ],
    }
  },
  watch: {
    'dateParms.menu'() {
      this.fetchData()
    }
  },
  created() {
    let form_id = this.$route.query.form_id
    this.form_id = form_id
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.PageLoading = true
      getFormData({ form_id: this.form_id, ...this.dateParms }).then(response => {
        this.list = response.data.data
        this.total = response.data.total
        this.info = response.info
        if(this.dateParms.menu==0){
         this.dateParms.menu = response.info.default_menu
        }
        this.PageLoading = false
      }, data => {
        this.PageLoading = false
      })
    }
  }
}
</script>
<style lang="scss">
.w-e-text-container {
  a {
    color: #336699;
  }
}

.calendarMain {
  padding: 0 20px;

  .el-calendar-day {
    height: 110px;
  }

  .el-calendar__title {
    font-size: 18px;
    font-weight: bold;
    color: #20a0ff;
  }

}

</style>
<style lang="scss" scoped>


.calendarMain {
  overflow: auto;

  .week-main {
    padding: 20px 0;
    max-width: 800px;
    border-bottom: 1px solid #eee;

    .edit, del {
      margin: 0 10px;
      cursor: pointer;
    }

    .edit {
      color: #20a0ff;
    }

    .del {
      color: orange;
    }
  }

  &::-webkit-scrollbar {
    width: 3px;
    height: 1px;
  }

  &::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    //border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #aaa;
  }

  &::-webkit-scrollbar-track { /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    //border-radius: 10px;
    background: #fefefe;
  }
}

.edit-main {
  height: 500px;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 3px;
    height: 1px;
  }

  &::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    //border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #aaa;
  }

  &::-webkit-scrollbar-track { /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    //border-radius: 10px;
    background: #fefefe;
  }
}

.calendarMain {
  .calendarBox {
    width: 100%;
    height: 100%;
    position: relative;

    &:hover {
      .itemPlus {
        display: block;
      }
    }

    .itemPlus {
      color: #ed883f;
      position: absolute;
      top: 0px;
      right: 5px;
      text-align: right;
      font-size: 12px;
      display: none;
    }

    .item {
      padding: 5px;
      font-size: 12px;
      text-align: justify;
      border-radius: 5px;
      color: #409EFF;
      background: #ecf5ff;

      &:hover {
        color: #ed883f;
      }
    }
  }
}
</style>
